<template>
  <div>
    <van-button class="plus" @click="showDialog" round icon="plus" color="#ccc"></van-button>
    <van-action-sheet v-model:show="show" he>
      <van-field ref="input" v-model="title" :autofocus="true" placeholder="你打算做什么？" />
      <div class="btns">
        <van-icon size="25" name="tosend" @click="showDate" />{{date}}
        <van-icon size="25" name="todo-list-o" />
        <van-icon style="margin-left:auto" size="25" name="success" @click="onSubmit" />
      </div>
    </van-action-sheet>

    <van-calendar v-model:show="isShowDate" @confirm="onConfirm" />
  </div>
</template>

<script>
import { formatDate } from '@/utils'
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
  emits: ['add'],
  setup (props, context) {
    const store = useStore()

    const input = ref(null)
    const show = ref(false)
    const title = ref('')
    const isShowDate = ref(false)
    const date = ref('')

    const showDialog = () => {
      show.value = true
    }
    const showDate = () => {
      isShowDate.value = true
    }

    const onConfirm = (value) => {
      isShowDate.value = false
      date.value = formatDate(value)
      console.log(date.value)
    }
    async function onSubmit () {
      const todo = {
        date: date.value,
        desc: '',
        isDone: false,
        title: title.value
      }
      await store.dispatch('add', todo)
      show.value = false
      title.value = ''
    }
    return {
      date,
      input,
      show,
      title,
      isShowDate,
      showDialog,
      showDate,
      onConfirm,
      onSubmit
    }
  },
  watch: {
    show () {
      if (this.show) {
        setTimeout(() => {
          if (this.$refs.input) {
            this.input.focus()
          }
        })
      }
    }
  }
}
</script>

<style>
  .plus{
    position: absolute !important;
    bottom: 80px ;
    right: 40px;
    z-index: 1000;
  }
  .van-button--normal {
      padding: 0 13px !important;
      font-size: 14px;
  }
  .btns{display: flex;}
</style>
